<template>
    <fieldset>
        <legend>失效函数的应用</legend>
        <h1 id="content">
            {{ content }}
        </h1>
        <button :class="{active:index+1==page}" v-for="(item, index) in arr" :key="index" @click="pageChange(index + 1)">第{{ index + 1 }}页</button>
    </fieldset>
</template>

<script setup>
import { ref,onMounted,watchEffect } from "vue"
import CancelPromise from "./cancelPromise";
// 模拟 失效函数的应用   例如点击发起请求时  由于响应的数据的快慢而产生的页面数据错乱问题

// 模拟请求
let api1 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve("第一页数据");
    }, 1000)
},signal)

let api2 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve("第二页数据");
    }, 1500)
},signal)


let api3 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve("第三页数据");
    }, 2000)
},signal)

// 怎么取消promise
    // 在 promise内部 直接抛出异常(throw error, new DOMExpection)
let api = {
    api1,
    api2,
    api3
}


let content = ref('')
let arr = ref(['第1页', '第2页', '第3页'])

// 点击获取分页数据
 // 声明第三方变量来做高亮的表达式判断  让这个第三方变量 == 页码
 let page = ref(1)
let pageChange = (pagesize) => {
    console.log(pagesize);


    page.value = pagesize
}

// 封装 获取内容的方法

/**
 * 
 * @param {Number} pagesize  当前的页码 
 * @param {Object} signal  控制器(AbortController)的signal对象 
 */
let fetchData =(pagesize,signal)=>{
    return api['api' + pagesize](signal)
        .then(res => {
            console.log(res);

            content.value = res
        })
}

// 使用 watchEffect

    watchEffect((invalidate)=>{
        // 声明一个控制器
        let abortController = new AbortController()
        // 拿里面的 signal
        let signal = abortController.signal
        // 发起请求，并传入signal对象
        fetchData(page.value,signal)

        invalidate(()=>{
            // 页码切换前取消上一个 promise
            abortController.abort()
        })
    })

    // 页面加载时获取第一页的数据
   
// onMounted(()=>{
//     fetchData(1)
// })

</script>

<style>
    .active{
        background: deepskyblue;
    }
</style>